Posicionamento CSS em Projeto Web
Demonstração Detalhada das Posições (Tarefa 1 e 2)
O vídeo de referência sobre as propriedades de posicionamento: [https://www.youtube.com/watch?v=9hpWuzLXkSk]
1. position: static
Este é o valor **padrão** (default) de todos os elementos. O elemento segue o fluxo normal do documento. As propriedades top, bottom, left e right **não têm efeito**.
2. position: relative
O elemento é posicionado em relação à sua **posição original** no fluxo do documento. O espaço original que ele ocupava "permanece reservado", afetando o layout dos elementos vizinhos apenas visualmente.
top: 20px; left: 20px;).
O fluxo continua a partir de onde o elemento RELATIVE começou originalmente, ignorando seu deslocamento visual.
3. position: absolute (Relativo ao Elemento Pai)
O elemento é removido do fluxo normal e posicionado em relação ao seu ancestral "não-static" mais próximo. Neste caso, é a caixa roxa (position: relative).
position: relative).
Como o elemento absolute foi removido do fluxo, este texto (que está no mesmo pai) aparece como se o elemento absolute não existisse, mas está dentro do espaço reservado pela altura do pai.
4. position: fixed (Relativo ao Viewport/Navegador)
Este elemento é idêntico aos elementos "Navbar" no topo e à "Caixa de Informações do Criador" no canto inferior direito. O elemento é removido do fluxo e é posicionado em relação à **janela de visualização (viewport)" do navegador. Ele **não se move" quando a página é rolada.
Conteúdo da Página e Colunas (Tarefa 5)
Aqui começa o conteúdo principal, obrigando a página a rolar para demonstrar fixed e sticky.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Aqui temos a primeira de muitas repetições de parágrafos. Role a página para baixo e observe que a **barra de navegação** e a **caixa de informações do criador** permanecem sempre visíveis (position: fixed). Além disso, o **anúncio na barra lateral** ficará preso em uma posição específica quando o topo da caixa de conteúdo for atingido (position: sticky).
Bloco de conteúdo 1
Mais conteúdo abaixo...
Bloco de conteúdo 2
Mais conteúdo abaixo...
Bloco de conteúdo 3
Fim do conteúdo principal.